<template>
  <div class="module">
    <div class="table">
      <div class="head">
        <div class="tr">
          <div class="index">序号</div>
          <div class="name">任务名称</div>
          <div class="time">时间</div>
          <div class="status">完成情况</div>
        </div>
      </div>
      <div class="body scrollbar">
        <transition-group name="flip-list" tag="div">
          <div class="tr" v-for="(item, i) in list" :key="item.instanceNodeId">
            <div class="index">{{ i + 1 }}</div>
            <div class="name">{{ item.instanceNodeName }}</div>
            <div class="time">{{ item.time }}</div>
            <div class="status">{{ item.stateStr }}</div>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { getAllNodesByInstanceId } from '@/api/api-mock'
let timer;
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    getData() {
      getAllNodesByInstanceId().then(res => {
        if (res.success) {
          var list = [...(res.obj || []).filter(t => t.nodeStateId == 4), ...(res.obj || []).filter(t => t.nodeStateId == 0)]
          this.list = list.map(t => ({
            ...t,
            time: moment(t.transTime).format('YYYY-MM-DD HH:mm:ss'),
            stateStr: t.nodeStateId == 0 ? '已完成' : '进行中'
          }))
        }
      })
    }
  },
  mounted() {
    this.getData();
    timer = setInterval(this.getData, 1000 * 30)
  },
  beforeDestroy() {
    if (timer) {
      clearInterval(timer)
    }
  }
}
</script>
<style lang="less" scoped>
.flip-list-move {
  transition: transform 1s;
}

.module{
  width: 100%;
  height: 100%;
  .table{
    width: 100%;
    .head{
      width: 100%;
      .tr{
        display: flex;
        height: 32px;
        line-height: 32px;
        font-size: 12.28px;
        color: #fff;
      }
    }
    .body{
      width: calc(100% - 1px);
      height: 240px;
      .tr{
        display: flex;
        height: 32px;
        align-items: center;
        font-size: 10.75px;
        color: #03BBFF;
        &:nth-child(2n + 1) {
          border-top: 1px dashed #6B7BB0;
          border-bottom: 1px dashed #6B7BB0;
          background: rgb(13, 33, 94);
        }
      }
    }
    .index{
      width: 50px;
    }
    .name{
      flex: 1;
    }
    .time{
      width: 140px;
    }
    .status{
      width: 80px;
    }
  }
}
</style>
